<template>
  <div>
    <div class="home">
      <h1>小目标列表</h1>
      <h3>添加小目标</h3>
      <input
        type="text"
        class="input"
        v-model="value"
        @keyup.13="addOk"
        placeholder="输入小目标后，按回车确定"
      />
      <p>
        共有{{ prolist.length }}个目标
        {{
          noend == 0
            ? "全部完成了"
            : "已完成" +
              (prolist.length - noend) +
              "，还有" +
              noend +
              "条未完成"
        }}
      </p>

      <input
        type="radio"
        name="chooseType"
        id="radio"
        checked="true"
        @click="chooseList(1)"
      />所有目标
      <input
        type="radio"
        name="chooseType"
        id="radio"
        @click="chooseList(2)"
      />已完成目标
      <input
        type="radio"
        name="chooseType"
        id="radio"
        @click="chooseList(3)"
      />未完成目标

      <ul>
        <li v-for="(item, index) in newList" :key="index">
          <div>
            <span
              class="status-span"
              @click="changeType(index)"
              :class="{ 'status-end': item.status }"
            ></span>
            <span>{{ item.name }}</span>
            <span class="close" @click="delectList(item)">X</span>
          </div>
          <input type="text" class="text2" v-focus />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      prolist: [
        { name: "HTML5", status: false },
        { name: "CSS3", status: false },
        { name: "vue", status: false },
        { name: "react", status: false },
      ],
      newList: [],
      value: "",
      type: "",
    };
  },
  computed: {
    //计算属性，返回未完成目标的条数，就是数组里面status=false的条数
    noend: function () {
      return this.prolist.filter(function (item) {
        return !item.status;
      }).length;
    },
  },
  created() {},
  mounted() {
    //初始化，把prolist赋值给newList。默认显示所有目标
    this.newList = this.prolist;
  },
  //  自定义指令 focus
  directives: {
    focus: {
      update(el) {
        el.focus();
      },
    },
  },
  watch: {},
  methods: {
    // 添加
    addOk() {
      this.prolist.push({
        name: this.value,
        status: false,
      });
      this.value = "";
    },

    // 切换
    chooseList(type) {
      this.type = type;
      switch (type) {
        case 1:
          this.newList = this.prolist;
          break;
        case 2:
          this.newList = this.prolist.filter(function (item) {
            return item.status;
          });
          break;
        case 3:
          this.newList = this.prolist.filter(function (item) {
            return !item.status;
          });
          break;
      }
    },

    // 改变状态
    changeType(index) {
      this.newList[index].status = !this.newList[index].status;
      this.chooseList(this.type);
    },
    // 删除
    delectList(item) {
      var index = this.prolist.indexOf(item);
      this.prolist.splice(index, 1);
      this.chooseList(this.type);
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
.home {
  margin-left: 200px;
}
.input {
  width: 400px;
  height: 30px;
}
li {
  list-style-type: none;
  line-height: 40px;
  position: relative;
  border: 1px solid transparent;
  padding: 0 20px;
}

li .status-span {
  display: block;
  width: 10px;
  height: 10px;
  background: #ccc;
  margin: 14px 10px 0 0;
  float: left;
}

li .status-span.status-end {
  background: #09f;
}

li .close {
  position: absolute;
  color: #f00;
  font-size: 20px;
  line-height: 40px;
  height: 40px;
  right: 20px;
  cursor: pointer;
  display: none;
  top: 0;
}

li:hover {
  border: 1px solid #09f;
}

li:hover .close {
  display: block;
}

li div {
  display: block;
}

li.eidting div {
  display: none;
}

li .text2 {
  height: 40px;
  padding-left: 10px;
  box-sizing: border-box;
  margin-left: 10px;
  width: 80%;
  display: none;
}

li.eidting .text2 {
  display: block;
}

li .text-keyword {
  height: 40px;
  padding-left: 10px;
  box-sizing: border-box;
  margin-left: 10px;
  width: 80%;
  display: none;
}

.text-keyword {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding-left: 10px;
  outline: none;
}
</style>
